import { useRef } from 'react';
import { Avatar, Modal, Dropdown, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { HOME_URL } from '@/config/config';
import { connect } from 'react-redux';
import { setToken } from '@/redux/modules/global/action';
import PasswordModal, { PassModalProps } from './PasswordModal';
import InfoModal, { InfoModalProps } from './InfoModal';
import avatar from '@/assets/images/avatar.png';

const AvatarIcon = (props: any) => {
	const { setToken, isopen } = props;
	const navigate = useNavigate();

	const passRef = useRef<PassModalProps>(null);
	const infoRef = useRef<InfoModalProps>(null);

	// 退出登录
	const logout = () => {
		Modal.confirm({
			title: '温馨提示 🧡',
			icon: <ExclamationCircleOutlined />,
			content: '是否确认退出登录？',
			okText: '确认',
			cancelText: '取消',
			onOk: () => {
				setToken({});
				navigate('/login');
			},
		});
	};

	const items: any = [
		{
			key: '2',
			label: <span className='dropdown-item'>个人信息</span>,
			onClick: () => infoRef.current!.showModal({ by: 'header' }),
		},
		{
			key: '3',
			label: <span className='dropdown-item'>修改密码</span>,
			onClick: () => passRef.current!.showModal({ by: 'header' }),
		},
		{ type: 'divider' },
		{
			key: '1',
			disabled: isopen,
			label: <span className='dropdown-item'>返回主菜单</span>,
			onClick: () => navigate(HOME_URL),
		},
		{ type: 'divider' },
		{
			key: '4',
			label: <span className='dropdown-item'>退出登录</span>,
			onClick: logout,
		},
	];
	return (
		<>
			<Dropdown menu={{ items }} placement='bottom' arrow trigger={['click']}>
				<Avatar className=' cursor-pointer' size='large' src={avatar} />
			</Dropdown>
			<InfoModal innerRef={infoRef}></InfoModal>
			<PasswordModal innerRef={passRef}></PasswordModal>
		</>
	);
};

const mapDispatchToProps = { setToken };
export default connect(null, mapDispatchToProps)(AvatarIcon);
